module.exports = {
  deep: true,
  bind: function () {
    console.log('fullpage bound!')
  },
  update: function (options) {
    // Init
    let that = this
    that.el.classList.add('fullpage-wp')

    that.parentEl = that.el.parentNode
    that.parentEl.classList.add('fullpage-container')
    that.curIndex = options.start
    that.startY = 0

    that.pageEls = that.el.children
    that.total = that.pageEls.length

    setTimeout(() => {
      let that = this
      that.width = that.parentEl.offsetWidth
      that.height = that.parentEl.offsetHeight
      for (let i = 0; i < that.pageEls.length; i++) {
        let pageEl = that.pageEls[i]
        pageEl.setAttribute('data-id', i)
        pageEl.classList.add('page')
        pageEl.style.width = that.width + 'px'
        pageEl.style.height = that.height + 'px'
        that.prevIndex = that.curIndex
        pageEl.addEventListener('touchstart', function (e) {
          that.startX = e.targetTouches[0].pageX
          that.startY = e.targetTouches[0].pageY
          console.log('startY:' + that.startY)
        })

        pageEl.addEventListener('touchend', function (e) {
          console.log('endY:' + e.changedTouches[0].pageY)
          // let sub = 0.01
          // if ((that.startY !== 0) && !options.movingToDimension) {
          let sub = (e.changedTouches[0].pageY - that.startY) / that.height
          // }
          let der = Math.abs(sub) < options.der ? 0 : sub > 0 ? -1 : 1
          // let der = sub > options.der ? -1 : sub < options.der ? 1 : 0

          let nextIndex = that.curIndex + der
          console.log('nextIndex:' + nextIndex)
          if (nextIndex >= 0 && nextIndex < that.total) {
            let dist = nextIndex * (-that.height)
            options.beforeChange(that.prevIndex, nextIndex)
            that.curIndex = nextIndex
            that.el.classList.add('anim')
            let xPx = '0px'
            let yPx = dist + 'px'
            that.el.style.cssText += ('-webkit-transform:translate3d(' + xPx + ', ' + yPx + ', 0px);transform:translate3d(' + xPx + ', ' + yPx + ', 0px);')
            window.setTimeout(function () {
              options.afterChange(that.prevIndex, nextIndex)
              that.prevIndex = nextIndex
              that.vm.$emit('toogle_animate', nextIndex)
            }, options.duration)
          } else {
            if (options.loop) {
              nextIndex = nextIndex < 0 ? that.total - 1 : 0
              let dist = nextIndex * (-that.height)
              options.beforeChange(that.prevIndex, nextIndex)
              that.curIndex = nextIndex
              that.el.classList.add('anim')
              let xPx = '0px'
              let yPx = dist + 'px'
              that.el.style.cssText += ('-webkit-transform:translate3d(' + xPx + ', ' + yPx + ', 0px);transform:translate3d(' + xPx + ', ' + yPx + ', 0px);')
              window.setTimeout(function () {
                options.afterChange(that.prevIndex, nextIndex)
                that.prevIndex = nextIndex
                that.vm.$emit('toogle_animate', nextIndex)
              }, options.duration)
            } else {
              that.curIndex = nextIndex < 0 ? 0 : that.total - 1
            }
          }
        })

        if (options.preventWechat) {
          pageEl.addEventListener('touchmove', function (e) {
            e.preventDefault()
          })
        }
      }
      let dist = that.curIndex * (-that.height)
      options.beforeChange(that.prevIndex, that.curIndex)
      that.el.classList.remove('anim')
      let xPx = '0px'
      let yPx = dist + 'px'
      that.el.style.cssText += ('-webkit-transform:translate3d(' + xPx + ', ' + yPx + ', 0px);transform:translate3d(' + xPx + ', ' + yPx + ', 0px);')
      that.prevIndex = this.prevIndex
      that.curIndex = this.curIndex
      window.setTimeout(function () {
        options.afterChange(that.prevIndex, that.curIndex)
        that.prevIndex = that.curIndex
        that.vm.$emit('toogle_animate', that.curIndex)
      }, options.duration)
    }, 0)
  }
}
